<script setup lang="ts">
// 步骤：
// 1. 准备静态结构
// 2. 分析按钮组件的自定义属性
// 3. `defineProps` 定义 Props 接收值
// 4. 模板中使用父组件传过来的值设置按钮样式
// 🔔 使用解构方式设置默认值，eslint 规则会报错，修改 eslint 规则即可
// const { type = 'default', size = 'middle' } = defineProps<{
//   // 👶 string 范围太大了，能用，但不够安全
//   // type?: string;
//   // 💪 通过联合类型缩小范围，能有更好的类型提示和校验
//   type?: 'default' | 'primary' | 'plain' | 'gray';
//   size?: 'large' | 'middle' | 'small' | 'mini';
// }>();

// 了解：早期的 Props 配合类型断言写法，3.2.25 以前
import type { PropType } from 'vue';
defineProps({
  type: {
    type: String as PropType<'default' | 'primary' | 'plain' | 'gray'>,
    default: 'default',
  },
  size: {
    type: String as PropType<'large' | 'middle' | 'small' | 'mini'>,
    default: 'middle',
  },
});
// 如何选择：
//    实验性写法最方便，新项目推荐，但要求 Vue 版本较新，目前还没完全定稿，所以终端有提醒。
//    正式项目建议按团队习惯来选择，老项目用类型断言写法较为常见。
</script>

<template>
  <!-- PS: type 和 size 其实就是某个类名而已 -->
  <button class="xtx-button ellipsis" :class="`${type} ${size}`">
    <slot></slot>
  </button>
</template>

<style scoped lang="less">
// 基于类名定义一些和定制样式无关的样式
.xtx-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

// ---------大小类名-------------
// 大
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}

// 中
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}

// 小
.small {
  width: 100px;
  height: 32px;
}

//超小
.mini {
  width: 60px;
  height: 32px;
}

// ---------颜色类名----------
// 默认色
.default {
  border-color: #e4e4e4;
  color: #666;
}

// 确认
.primary {
  border-color: @xtxColor;
  background-color: @xtxColor;
  color: #fff;
}

// 普通
.plain {
  border-color: @xtxColor;
  color: @xtxColor;
  background-color: lighten(@xtxColor, 50%);
}

// 灰色
.gray {
  border-color: #ccc;
  background-color: #ccc;
  color: #fff;
}
</style>
